<template>
	<view>
		<un-navbar titleText="订单" :isBack="false" />
		<view class="box flex align_center justify_around tabbox pa24 bg_white bg_white">
			<view class="po_rel f_s32" :class="tabobj.value==item.value?'tabtitle zttecolor fw_bold':'te_black9'"
				v-for="(item,index) in tabobj.list" :key="index" @click="tabobj.value=item.value">{{item.text}}</view>
		</view>
		<view class="zhanwei"></view>
		<view class="ma20 pa_lr20 bg_white bo_radius18" v-for="item in list" :key="item" @click="goinfo">
			<view class="flex align_center justify_between line_bottom pa_tb20">
				<view>套餐名称/技师名称</view>
				<view class="te_red" v-if="item.status == 1">待支付</view>
				<view class="te_black6" v-if="item.status == 2">已取消</view>
				<view class="te_blue" v-if="item.status == 3">待消费</view>
				<view class="te_blue" v-if="item.status == 4">服务中</view>
				<view class="zttecolor" v-if="item.status == 5">已完成</view>
			</view>
			<view class="flex pa_tb20">
                <img src="https://ai-public.mastergo.com/ai/img_res/2e2addc2d723827ffb23ee205de713b5.jpg" class="img_box bo_radius18 ma_right20"  mode="aspectFill"/>
                <view class="flex1">
                    <view class="f_s30 ma_bottom20 fw_bold flex1">按摩</view>
                    <view class="flex align_center ma_bottom20 text_black6 f_s28">
                        <i class="iconfont i-time pa_right10 f_s28"></i> 80分钟
                    </view>
					<view class="flex align_center justify_between">
						<span class="f_s28">¥398.0</span>
						<span class="f_s28 zttecolor">金额：¥398.0</span>
					</view>
                </view>
            </view>
			<view class="line_top flex justify_end pa_tb20" v-if="item.status == 1 || item.status == 2 || item.status == 4">
				<view class="btn bo_radius8 in te_black6" v-if="item.status == 2">删除订单</view>
				<view class="btn bo_radius8 in te_black6" v-if="item.status == 1">立即支付</view>
				<view class="btn bo_radius8 ztbgcolor te_white" v-if="item.status == 4">完成服务</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { showToast } from '@/utils/utils'
	import { ref, reactive } from 'vue'

	const tabobj = reactive<object>({
		list: [{
			text: '全部', value: ''
		}, {
			text: '待支付', value: '1'
		}, {
			text: '待消费', value: '2'
		}, {
			text: '已完成', value: '3'
		}],
		value: ''
	})
	const list = ref<any>([{
		status: 1
	},{
		status: 2
	},{
		status: 3
	},{
		status: 4
	},{
		status: 5
	}])
	
	const goinfo = () => {
		uni.navigateTo({
			url: "/subPackages/order/info/index"
		})
	}
</script>

<style scoped lang="scss">
	$ztcolor: #5FB72D;

	.zttecolor {
		color: $ztcolor;
	}

	.ztbgcolor {
		background-color: $ztcolor;
	}

	.box{
		position: fixed;
		left: 0;
		height: 100upx;
		z-index: 99;
		width: 750upx;
	}
	.zhanwei{
		height: 100upx;
	}
	.tabtitle {
		&::after {
			position: absolute;
			content: "";
			bottom: -14upx;
			width: 56upx;
			height: 6upx;
			border-radius: 4upx;
			left: 0;
			right: 0;
			margin: 0 auto;
			background: $ztcolor ;
		}
	}
	.line_bottom{
		border-bottom: 1upx solid #ebebeb;
	}
	.line_top{
		border-top: 1upx solid #ebebeb;
	}
	.img_box{
        width: 150upx;
        height: 150upx;
    }
	.btn{
		padding: 8upx 16upx;
	}
	.in{
		background:#e4e4e4;
	}
</style>